<!--
 * @Autor: 黄旗
 * @Date: 2020-06-02 17:47:27
-->
<template>
    <div class="i-table-no-border">
        <div style="margin: 8px 0 16px;display: flex;justify-content: space-between;">
            <h3 style="font-size:14px">科室病人月就诊次数人数汇总表</h3>
            <DatePicker :options="pickerOptions" v-model="value1" format="yyyy-MM" type="month" placeholder="请选择月份"
                style="width: 200px" :clearable="false" @on-change="changtimeEvent">
            </DatePicker>
        </div>
        <Table :columns="columns1" show-summary :data="data1" :loading="loading2" :summary-method="handleSummary">
        </Table>
        <h3 style="margin: 20px 0 16px;font-size:14px">科室病人年度在诊周期病人人数汇总表</h3>
        <Table :columns="columns" show-summary :data="data" :loading="loading1"></Table>
    </div>
</template>

<script>
    /* 这里导入其他文件：import 《组件名称》 from '《组件路径》 */
    import { treatcyclelist, monthNumList } from '@/api/consumption';
    import dayjs from 'dayjs'
    export default {
        /* import引入的组件注入到components对象中使用 */
        components: {},
        data () {
            return {
                pickerOptions: {
                    disabledDate: (time) => {
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        if (month >= 1 && month <= 9) {
                            month = '0' + month;
                        }
                        var currentdate = year.toString() + month.toString();

                        var timeyear = time.getFullYear();
                        var timemonth = time.getMonth() + 1;
                        if (timemonth >= 1 && timemonth <= 9) {
                            timemonth = '0' + timemonth;
                        }
                        var timedate = timeyear.toString() + timemonth.toString();
                        return currentdate < timedate;
                    }
                },
                data: [],
                value1: dayjs(new Date()).format('YYYY-MM'),
                data1: [],
                columns1: [
                    { title: '诊室', fixed: 'left', width: 120, key: 'name' },
                    { title: '1次', minWidth: 80, key: 'num_1' },
                    { title: '2次', minWidth: 80, key: 'num_2' },
                    { title: '3次', minWidth: 80, key: 'num_3' },
                    { title: '4次', minWidth: 80, key: 'num_4' },
                    { title: '5次', minWidth: 80, key: 'num_5' },
                    { title: '6次', minWidth: 80, key: 'num_6' },
                    { title: '7次', minWidth: 80, key: 'num_7' },
                    { title: '8次', minWidth: 80, key: 'num_8' },
                    { title: '9次', minWidth: 80, key: 'num_9' },
                    { title: '10次', minWidth: 80, key: 'num_10' },
                    { title: '11次', minWidth: 80, key: 'num_11' },
                    { title: '12次', minWidth: 80, key: 'num_12' },
                    { title: '13次', minWidth: 80, key: 'num_13' },
                    { title: '14次', minWidth: 80, key: 'num_14' },
                    { title: '15次', minWidth: 80, key: 'num_15' },
                    { title: '15次+', minWidth: 80, key: 'num_15+' }
                ],
                columns: [
                    { title: '诊室', fixed: 'left', width: 120, key: 'clinic_name' },
                    { title: '1个月', minWidth: 80, key: 'month_1' },
                    { title: '2个月', minWidth: 80, key: 'month_2' },
                    { title: '3个月', minWidth: 80, key: 'month_3' },
                    { title: '4个月', minWidth: 80, key: 'month_4' },
                    { title: '5个月', minWidth: 80, key: 'month_5' },
                    { title: '6个月', minWidth: 80, key: 'month_6' },
                    { title: '7个月', minWidth: 80, key: 'month_7' },
                    { title: '8个月', minWidth: 80, key: 'month_8' },
                    { title: '9个月', minWidth: 80, key: 'month_9' },
                    { title: '10个月', minWidth: 80, key: 'month_10' },
                    { title: '11个月', minWidth: 80, key: 'month_11' },
                    { title: '12个月', minWidth: 80, key: 'month_12' },
                    { title: '1年以上', minWidth: 80, key: 'than_one_year' },
                    { title: '2年以上', minWidth: 80, key: 'than_two_year' },
                    { title: '3年以上', minWidth: 80, key: 'than_three_year' }
                ],
                loading1: false,
                loading2: false

            };
        },
        /* 监听属性 类似于data概念 */
        computed: {},
        watch: {},
        methods: {
            handleSummary ({ columns, data }) {
                const sums = {};
                columns.forEach((column, index) => {
                    const key = column.key;
                    if (index === 0) {
                        sums[key] = {
                            key,
                            value: '合计'
                        };
                        return;
                    }
                    const values = data.map(item => Number(item[key]));
                    if (!values.every(value => isNaN(value))) {
                        const v = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[key] = {
                            key,
                            value: v
                        };
                    } else {
                        sums[key] = {
                            key,
                            value: '/'
                        };
                    }
                });

                return sums;
            },
            /* @函数功能: 请求数据 */
            askData () {
                this.loading1 = true
                treatcyclelist().then(res => {
                    this.data = res
                    this.loading1 = false
                })
            },
            askData1 () {
                let month_is = dayjs(new Date(this.value1)).format('YYYY-MM')
                let params = {
                    month_is
                }
                this.loading2 = true
                monthNumList(params).then(res => {
                    this.data1 = res
                    this.loading2 = false
                })
            },
            changtimeEvent (value) {
                this.askData1()
            }
        }
    }
</script>

<style scoped>

</style>
